<template>
	<view class="topicPages">
		<view class="searchContent">
			<u--input shape="circle" inputAlign="center" placeholder="搜索" suffixIcon="search"
				:suffixIconStyle="iconClass" v-model="keywords" @input="doSearch"></u--input>
		</view>
		<view class="topicList">
			<view v-for="(item,index) in list" :key="index" class="topicItem" @click="selectTopic(item)">
				<view>{{index+1}}.</view>
				<!-- <view>{{item.topicName}}</view> -->
				<view>
					<text v-for="(key,num) in item.topicName.split('')" :key="num" :style="{'color':setColor(key)}">
						{{key}}
					</text>
				</view>
			</view>
		</view>
		<u-loadmore :status="isFinish?'nomore':'loading'" loading-text="正在加载" loadmore-text="加载更多" nomore-text="没有更多了"
			color="#ccc" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: "",
				list: [],
				pageNo: 1,
				pageSize: 20,
				total: 0,
				isFinish: false,
				isLoading: false,
				iconClass: {
					color: "#004DA1",
					fontSize: "52rpx",
					borderLeft: "1rpx solid #D0D0D0",
					padding: "0 0 0 38rpx"
				},
			}
		},
		onReachBottom() {
			if (!this.isLoading && !this.isFinish) {
				this.pageNo++;
				this.initData();
			}
		},
		onPullDownRefresh() {
			this.isFinish = false;
			if (!this.isLoading) {
				this.pageNo = 1;
				this.list = [];
				this.initData(true);
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			setColor(e) {
				if (this.keywords.indexOf(e) != -1) {
					return '#007AFF'
				} else {
					return "#333"
				}
			},
			doSearch() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list = [];
					this.initData(true);
				}
			},
			selectTopic(item) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.topicId = item.id;
				prevPage.$vm.topicName = item.topicName;
				uni.navigateBack({
					delta: 1
				})
			},
			initData(isRefresh) {
				this.isLoading = true;
				Promise.all([
					this.$request.get(this.$api.topicList, {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						topicName: this.keywords
					}),
				]).then(res => {
					if (isRefresh) {
						uni.stopPullDownRefresh()
					}
					this.isLoading = false;
					this.list = this.list.concat(res[0].result.records)
					this.total = res[0].result.total;
					if (this.pageNo * this.pageSize < this.total) {
						this.isFinish = false
					} else {
						this.isFinish = true
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.topicPages {
		.searchContent {
			padding: 40rpx 40rpx 10rpx;
			background-color: #FAFAFA;
		}

		.topicList {
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			padding: 0 40rpx;

			.topicItem {
				display: flex;
				justify-content: flex-start;
				line-height: 100rpx;
				height: 100rpx;
				border-bottom: 1rpx solid #e0e0e0;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
</style>
